<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       .main .balls {
    width: 450px;
    padding: 30px 10px 10px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 4px;
}

.main .balls:after {
    content: '\20';
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
}

.main .balls span {
    position: absolute;
    left: 12px;
    top: 5px;
    font-size: 13px;
}

.main b {
    float: left;
    width: 30px;
    height: 30px;
    font-size: 15px;
    background: #FFF;
    border: 1px solid;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.main .red .active {
    background: #f56c6c;
    color: #FFF;
}

.main .blue .active {
    background: #3a8ee6;
    color: #FFF;
}

.main .red {
    background: #feeff0;
}

.main .red b {
    border-color: #f56c6c;
}

.main .blue {
    background: #ecf8ff;
}

.main .blue b {
    border-color: #3a8ee6;
}
    </style>
</head>

<body>
    <!-- 填写标签 -->
    <div class="main">
    <div class="balls red">
        <span>红球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
            <b>17</b>
            <b>18</b>
            <b>19</b>
            <b>20</b>
            <b>21</b>
            <b>22</b>
            <b>23</b>
            <b>24</b>
            <b>25</b>
            <b>26</b>
            <b>27</b>
            <b>28</b>
            <b>29</b>
            <b>30</b>
            <b>31</b>
            <b>32</b>
            <b>33</b>
        </div>
    </div>
    <div class="balls blue">
        <span>蓝球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
        </div>
    </div>
</div>
    <script type="text/javascript">
        // 填写JavaScript
        /*
双色球由33各红球和16各蓝球组成，1注双色球包括6各不重复的红球和1各蓝球。完成随机一注功能
函数返回：
1. 以字符串形式输出随机一注结果，选中的红蓝球用|隔开，红球在前，号码间用半角逗号隔开 如
2. 红球和蓝球号码排列顺序需与页面展示的顺序对应
页面交互：
1. 将选中的红球和蓝球哦用class=“active“高亮
2. 将选中的球按号码从小到大排列，移至所属组的前方
3. 每次执行randomFn函数，输出符合要求且不完全重复
         */
  randomFn();
  function randomFn()
  {
    let redballs = document.querySelectorAll(".red .balls-wp b")
    let blueballs = document.querySelectorAll(".blue .balls-wp b")
    let reddiv = document.querySelector(".red .balls-wp")
    let bluediv = document.querySelector(".blue .balls-wp")
    let red = []
    let redB = []
      // 随机选择红球并设置为高亮
    while(red.length<6)
    {
      let num=Math.floor(Math.random()*33)+1
      if(!red.includes(num))
      {
        red.push(num)
        let redb = redballs[num-1]
        redb.classList.add("active")
        redB.push(redb)
      }
    }
      // 随机选择蓝球并置为高亮
    let blue = Math.floor(Math.random()*16)+1
    let blueB = blueballs[blue-1]
    //不能直接接在后面写 因为add返回的是undefined
    blueB.classList.add("active")
    //按照从大到小 指的是b标签的内部

    redB = redB.sort((a,b)=>b.innerHTML-a.innerHTML) // 蓝色球 lambda 排序

    for(let i=0;i<6;i++)
    {
        redballs = document.querySelectorAll('.red .balls-wp b')
        //insertBefore是如果原来是子节点则将子节点移动到对应节点前面(删除原本位置)
        //反之如果原来不是子节点 则将新节点插入到对应节点前面
        reddiv.insertBefore(redB[i],redballs[0])
    }
    bluediv.insertBefore(blueB,blueballs[0])

    //因为涉及到06这种 而redb只是纯数值而已
    return redB.map(ball => ball.innerHTML).reverse().join(',') + '|' + blueB.innerHTML
}
    </script>
</body>

</html>